<template>
  <!--用ref创建响应式变量数据类型  如 let a=ref(1)  a.value+=1-->
  <div class="person">
    <h2>name: {{ name }}</h2>
    <h2>age: {{ age }}</h2>
    <h2>tel: {{ tel }}</h2>
    <h2>address{{address}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看电话</button>
  </div>
</template>

<!--<script lang="ts">-->
<!--export default {-->
<!--  name: "Person",-->

<!--  // setup(){-->
<!--  //   //set up函数种的this是不可识别的，Vue3种弱化了this-->
<!--  //   //data-->



<!--  //-->
<!--  //    return{name,age,changeName,changeAge,showTel}-->
<!--  //-->
<!--  //    // return  ()=> '哈哈'-->
<!--  //  }-->
<!--  //-->


<!--}-->
<!--</script>-->
<script lang="ts" setup name="Person121245">  //生效需要引入外部插件import VueSetupExtend  from 'vite-plugin-vue-setup-extend'
import {ref,reactive} from "vue";

// let age=666
let name=ref('ljw') //name 非响应式
let age=ref(19) //age 非响应式
let tel='eawea'
let address='一个地址'
console.log('1',name)
console.log('2',age)
console.log('3',tel)
console.log('4',address)

//方法
function changeName(){
  name.value="罗佳维" //有变化但是不是响应式的所以看不到

}
function changeAge(){
  age.value+=1 //
}
function showTel(){
  alert(tel)
}
//可自动返回对象
</script>
<style>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
</style>